import React, {PureComponent} from 'react';
import {FlatList, View, Text, Image} from 'react-native';

import ListItem from './listItem';
import ListFooter from './listFooter';
import DefaultListEmptyComponent from './listEmptyComponent';

export default class extends PureComponent {
    static defaultProps = {
        list: [],
        moreListStyle: {},
        numColumns: 2,
        isFetching: false,
        refreshing: false,
        hasMore: true,
        extraData: null,
        ListHeaderComponent: null,
        ItemSeparatorComponent() {
            return <View style={{height: 6}}/>;
        },
        onScroll: null,
        //列表key生成器
        keyExtractor(item, idx) {
            return item.num_iid.toString() + idx;
        },
        //list item
        renderItem({item}) {
            return <ListItem item={item}/>
        }
    };

    componentDidMount() {
        const {setCurrentList} = this.props;
        if (setCurrentList && typeof setCurrentList === 'function') {
            setCurrentList(this.refs.list);
        }
    }

    render() {
        const {moreListStyle, list, numColumns, isFetching, refreshing, hasMore, keyExtractor, renderItem, endReachedFn, refreshFn, ListHeaderComponent, ItemSeparatorComponent, onScroll, ListEmptyComponent, columnWrapperStyle, extraData} = this.props;
        let columnWrapper = numColumns === 2 ? [{
            marginLeft: 3,
            marginRight: 3,
            justifyContent: 'space-between'
        }, columnWrapperStyle] : null;
        return (
            <FlatList
                ref="list"
                style={[{flex: 1}, moreListStyle]}
                onScroll={event => {
                    onScroll && onScroll(event);
                }}
                ListHeaderComponent={ListHeaderComponent}
                ItemSeparatorComponent={ItemSeparatorComponent}
                ListEmptyComponent={
                    ListEmptyComponent ? ListEmptyComponent : isFetching || refreshing ? null : DefaultListEmptyComponent
                }
                numColumns={numColumns}
                extraData={extraData}
                data={list}
                keyExtractor={keyExtractor}
                renderItem={renderItem}
                onEndReached={endReachedFn}
                removeClippedSubviews={true}
                onEndReachedThreshold={.1}
                refreshing={refreshing}
                onRefresh={refreshFn}
                columnWrapperStyle={columnWrapper}
                ListFooterComponent={
                    list.length ?
                        <ListFooter
                            isFetching={isFetching}
                            hasMore={hasMore}
                        />
                        : null
                }
            />
        )
    }
}
